import { FC, useState, useEffect, useMemo } from 'react';
import styles from './style.less';

import Image from '@/components/Image';
import ScrollModel from '@/components/ScrollModel';
import LittleTitle from './../components/LittleTitle';
import SimpleList from '@/components/SimpleList';

import WorksCopyright from './lists/WorksCopyright';
import SoftwareCopyright from './lists/SoftwareCopyright';
import WebsiteCopyright from './lists/WebsiteCopyright';
import TrademarkCopyright from './lists/TrademarkCopyright';
import PatentCopyright from './lists/PatentCopyright';
import AdministrativeLicensing from './lists/AdministrativeLicensing';
import AdministrativeSanction from './lists/AdministrativeSanction';

import cover from '@/assets/qyhx/basic/Bitmap.png';
import icon1 from '@/assets/qyhx/basic/icon1.png';
import icon2 from '@/assets/qyhx/basic/icon2.png';
import icon3 from '@/assets/qyhx/basic/icon3.png';
import icon4 from '@/assets/qyhx/basic/icon4.png';
import classNames from 'classnames';
import { formatNumber } from '@/utils/utils';
import { useModel } from 'umi';

type infoItem = {
  label: string;
  value: string | number;
};
type secondItem = {
  title: string;
  icon: string;
};
const second_data: secondItem[] = [
  {
    title: '企业图谱',
    icon: icon1,
  },
  {
    title: '股权穿透图',
    icon: icon2,
  },
  {
    title: '最终受益人',
    icon: icon3,
  },
  {
    title: '疑似实际控制人',
    icon: icon4,
  },
];
const third_columns: any[] = [
  {
    title: '股东（发起人）',
    dataIndex: 'D001',
    width: 280,
    align: 'left',
  },
  {
    title: '持股比例',
    dataIndex: 'D004',
    width: 120,
    align: 'center',
    render: (v: any) => <span>{v?.D004 ? v.D004 + '%' : ''}</span>,
  },
  {
    title: '认缴出资额（万美元）',
    dataIndex: 'D002',
    width: 220,
    align: 'center',
    render: (v: any) => <span>{formatNumber(v.D002)}</span>,
  },
  {
    title: '认缴出资日期',
    dataIndex: 'D005',
    width: 155,
    align: 'center',
  },
];

const fourth_columns: any[] = [
  {
    title: '股东（发起人）',
    dataIndex: 'E001',
    width: 300,
  },
  {
    title: '关联企业',
    dataIndex: 'num',
    width: 260,
    render: (data: any) => <span>{data.num || 0}家关联企业</span>,
  },
  {
    title: '职务',
    dataIndex: 'E002',
    width: 200,
  },
];

const fifth_tab = [
  {
    title: '作品著作权',
  },
  {
    title: '软件著作权',
  },
  {
    title: '网站备案',
  },
  {
    title: '商标信息',
  },
  {
    title: '专利信息',
  },
];

const sixth_tab = [
  {
    title: '行政许可',
  },
  {
    title: '行政处罚',
  },
];

const Basic: FC = () => {
  const {
    baseInfo,
    getBaseInfo,
    relationUrl,
    getRelationURL,
    holderList,
    getHolderList,
    personalList,
    getPersonalList,
  } = useModel('company');

  useEffect(() => {
    const id = window.sessionStorage.getItem('companyId') || '';
    getBaseInfo({ id });
    getRelationURL({ id });
    getHolderList({ id });
    getPersonalList({ id });
  }, []);
  const baseInfo_left: {
    [key: string]: infoItem;
  } = useMemo(
    () => ({
      companyName: {
        label: '企业名称',
        value: baseInfo?.B102 || '--',
      },
      industry: {
        label: '所属产业',
        value: baseInfo?.LBMC || '--',
      },
      park: {
        label: '所在园区',
        value: baseInfo?.YQMC || '--',
      },
      type: {
        label: '企业类型',
        value: baseInfo?.B205 || '--',
      },
      companyIndustry: {
        label: '所在行业',
        value: baseInfo?.C009 || '--',
      },
    }),
    [baseInfo],
  );
  const baseInfo_right: {
    [key: string]: infoItem;
  } = useMemo(
    () => ({
      peopleName: {
        label: '企业负责人',
        value: baseInfo?.A001 || '--',
      },
      tel: {
        label: '联系电话',
        value: baseInfo?.K001 || '--',
      },
      creditCode: {
        label: '统一社会信用代码',
        value: baseInfo?.B109 || '--',
      },
      address: {
        label: '经营地址',
        value: baseInfo?.B016 || '--',
      },
      money: {
        label: '注册资金',
        value: baseInfo?.ZCZJ ? formatNumber(baseInfo.ZCZJ) : '--',
      },
    }),
    [baseInfo],
  );

  const [currentIntellectualNumber, setCurrentIntellectualNumber] =
    useState<number>(0);
  const [currentCreditNumber, setCurrentCreditNumber] = useState<number>(0);
  return (
    <div className={styles.container}>
      <ScrollModel width={1854} height={892}>
        <div className={styles.first}>
          <div className={styles.info_left}>
            {Object.keys(baseInfo_left).map((key) => (
              <div key={key} className={styles.info_item}>
                <p className={styles.value}>{baseInfo_left[key].value}</p>
                <p className={styles.label}>{baseInfo_left[key].label}</p>
              </div>
            ))}
          </div>
          <Image
            src={baseInfo?.img || cover}
            className={styles.company_cover}
          />
          <div className={styles.info_right}>
            {Object.keys(baseInfo_right).map((key) => (
              <div key={key} className={styles.info_item}>
                <p className={styles.label}>{baseInfo_right[key].label}</p>
                <p className={styles.value}>{baseInfo_right[key].value}</p>
              </div>
            ))}
          </div>
        </div>
        <div className={styles.bottom_warp}>
          <div className={styles.second}>
            <LittleTitle title="企业关联图谱" />
            <div className={styles.content}>
              <div className={styles.second_list}>
                {second_data.map((item: secondItem, index: number) => (
                  <div
                    className={styles.second_item}
                    key={index}
                    onClick={() => {
                      const href = relationUrl[index];
                      href && window.open(href);
                    }}
                  >
                    <Image src={item.icon} />
                    <p>{item.title}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div className={styles.third}>
            <LittleTitle title="股东信息" />
            <div className={styles.content}>
              <SimpleList
                width={846}
                height={223}
                columns={third_columns}
                dataSource={holderList}
                sortNumber
                sortText="序号"
                headerStyle={{
                  height: 42,
                  backgroundColor: 'rgba(141, 141, 141, 0.1)',
                }}
                rowStyle={{
                  height: 42,
                }}
                sortStyle={{
                  width: 88,
                }}
                hover
                odd
                rowBackground
              />
            </div>
          </div>
          <div className={styles.fourth}>
            <LittleTitle title="主要人员" />
            <div className={styles.content}>
              <SimpleList
                width={846}
                height={223}
                columns={fourth_columns}
                dataSource={personalList}
                sortNumber
                sortText="序号"
                headerStyle={{
                  height: 42,
                  backgroundColor: 'rgba(141, 141, 141, 0.1)',
                }}
                rowStyle={{
                  height: 42,
                }}
                sortStyle={{
                  width: 88,
                }}
                hover
                odd
                rowBackground
              />
            </div>
          </div>
          <div className={styles.fifth}>
            <LittleTitle title="知识产权与资质" />
            <div className={styles.tab_warp}>
              {fifth_tab.map((item: any, index: number) => (
                <div
                  className={classNames(
                    styles.fifth_item,
                    index === currentIntellectualNumber ? styles.actived : null,
                  )}
                  key={item.title}
                  onClick={() => setCurrentIntellectualNumber(index)}
                >
                  <span>{item.title}</span>
                </div>
              ))}
            </div>
            <div className={styles.content}>
              {/* 作品著作权 */}
              {currentIntellectualNumber === 0 && <WorksCopyright />}
              {/* 软件著作权 */}
              {currentIntellectualNumber === 1 && <SoftwareCopyright />}
              {/* 网站备案 */}
              {currentIntellectualNumber === 2 && <WebsiteCopyright />}
              {/* 商标信息 */}
              {currentIntellectualNumber === 3 && <TrademarkCopyright />}
              {/* 专利信息 */}
              {currentIntellectualNumber === 4 && <PatentCopyright />}
            </div>
          </div>
          <div className={styles.sixth}>
            <LittleTitle title="企业信用信息记录" />
            <div className={styles.sixth_list}>
              {sixth_tab.map((item: any, index: number) => (
                <div
                  className={classNames(
                    styles.sixth_item,
                    index === currentCreditNumber ? styles.actived : null,
                  )}
                  onClick={() => setCurrentCreditNumber(index)}
                  key={item.title}
                >
                  <span>{item.title}</span>
                </div>
              ))}
            </div>
            <div className={styles.content}>
              {/* 行政许可 */}
              {currentCreditNumber === 0 && <AdministrativeLicensing />}
              {/* 行政处罚 */}
              {currentCreditNumber === 1 && <AdministrativeSanction />}
            </div>
          </div>
        </div>
      </ScrollModel>
    </div>
  );
};
export default Basic;
